<template>
  <div id="cesium-container" class="cesium-container"></div>
  <div class="map-tip">
    <div class="tip-item">
      <img src="@/assets/icon/zsd.png" class="tip-icon" />
      <span>值班点</span>
    </div>
    <div class="tip-item">
      <img src="@/assets/icon/zbds.png" class="tip-icon" />
      <span>主变电站</span>
    </div>
    <div class="tip-item">
      <img src="@/assets/icon/qybds.png" class="tip-icon" />
      <span>牵引变电所</span>
    </div>
    <div class="tip-item">
      <img src="@/assets/icon/jys.png" @click="addEvent" class="tip-icon" />
      <span>降压变电所</span>
    </div>
  </div>

  <TableModal
    v-if="isTableModalVisible"
    :visible="isTableModalVisible"
    :model-data="modelData"
    @update:visible="isTableModalVisible = $event"
  />
  <InfoModal :visible="detailModel.show" :data="detailModel.data" :title="detailModel.title"
  @update:visible="detailModel.show = $event" />
</template>

<script setup>
import { onMounted, onUnmounted, ref, nextTick,reactive } from "vue";
import modifyMap from "@/utils/filterColor";
import * as Cesium from "cesium";
import {
  taiyuan,
  taiyuanLine,
  taiyuanRail,
  zxjdBdsPoints,
} from "@/assets/data/taiyuan";
import { cesiumConfig } from "@/config/map.config.js";
import { alovaInstance } from "/@/utils/request.js";
import TableModal from "./TableModal.vue";
import InfoModal from './InfoModal.vue';
let viewer = null;
let handler = null;
let intervalId = null;
const mapEntities = ref([]); // 存储所有实体的数组
const dutyPoints = ref([])
const listStaff = ref([])
const detailModel = reactive({
  show: false,
  data: {},
  title: ''
})

const modelData = reactive({
  modelType: "", // 初始模型类型为变电站
  value: "",
});
const siteData = ref([]); // 存储站点数据的数组
const isTableModalVisible = ref(false); // 控制表格模态框的显示
const bdsIcons = [
  new URL("@/assets/icon/qybds.png", import.meta.url).href,
  new URL("@/assets/icon/jys.png", import.meta.url).href,
  new URL("@/assets/icon/zbds.png", import.meta.url).href,
];
onMounted(() => {
  //初始化地
  nextTick(() => {
    initMap();
  });
  intervalId = setInterval(() => {
    getZbdsData();
  }, 30000); // 每60秒执行一次
});
onUnmounted(() => {
  viewer && viewer.destroy();
  handler && handler.destroy();
  // 清除定时器
  if (intervalId) {
    clearInterval(intervalId);
  }
});
// 新增方法，用于打开展示假数据的弹框
const openTableModal = () => {
  isTableModalVisible.value = true;
};
const addEvent = () => {
  viewer.scene.requestRender();
}
// 新增方法，用于打开展示值班详细
const openDetailModal = (datas) => {
  const {data,data2} = datas
  if(data2){
    detailModel.data =  [
      { label: '值班人', value: data.dutyName },
      { label: '站点', value: data.position },
      { label: '专业', value: data.type },
      { label: '联系方式', value: data.phone },
      { label: '当班人', value: data.empNames,full: true },
    ];
    if(data2.dutyName){
      detailModel.data = detailModel.data.concat([ { label: '', value: '',full: true },
      { label: '值班人', value: data2.dutyName },
      { label: '站点', value: data2.position },
      { label: '专业', value: data2.type },
      { label: '联系方式', value: data2.phone },
      { label: '当班人', value: data2.empNames,full: true },])
    }
    detailModel.title = '值班详细'
  }else{
    detailModel.data =  [
      { label: '值班人', value: data.dutyName },
      { label: '站点', value: data.position },
      { label: '专业', value: data.type },
      { label: '联系方式', value: data.phone },
      { label: '当班人', value: data.empNames,full: true },
    ];
  }
  detailModel.show = true;
  detailModel.title = '值班详细'
};
//获取值班人员
const getListStaff = async () => {
  const res = await alovaInstance.Get('/Portal/TYHome.ashx?Method=GetDutyInfo')
  if (res && res.data && res.data.length > 0) {
    listStaff.value = res.data
  }
  getZbdsData();
}
//获取变电所数据
const getZbdsData = async () => {
  if (mapEntities.value.length > 0) {
    mapEntities.value.forEach((entity) => {
      viewer.entities.remove(entity);
    });
    mapEntities.value = [];
  }
  const res = await alovaInstance.Get(
    "/Portal/TYHome.ashx?Method=GetBDSubstationDefectCount"
  );
  if (res && res.data && res.data.length > 0) {
    siteData.value = taiyuan.map((item) => {
      let index = res.data.find((i) => {
        return i.substationName == item.bdsName;
      });
      if (index) {
        item.bdsCount = index.count;
      }
      return item;
    });
    let zxjBdsIndex = res.data.find((item) => {
      return item.substationName == zxjdBdsPoints.lxjd.bdsName;
    });
    zxjdBdsPoints.lxjd.bdsCount = zxjBdsIndex ? zxjBdsIndex.count : 0;
    let xiaYuanBdsIndex = res.data.find((item) => {
      return item.substationName == zxjdBdsPoints.xiayuan.bdsName;
    });
    zxjdBdsPoints.xiayuan.bdsCount = xiaYuanBdsIndex ? xiaYuanBdsIndex.count : 0;
    getSubwayData();
  }
};
//获取地铁站数据
const getSubwayData = async () => {
  const res = await alovaInstance.Get(
    "/Portal/TYHome.ashx?Method=GetJCWSiteDefectCount"
  );
  if (res && res.data && res.data.length > 0) {
    res.data.forEach((item) => {
      let index = siteData.value.find((i) => {
        return i.siteCode == item.siteCode;
      });
      if (index) {
        index.siteCount = item.count;
      } else {
        let rail = taiyuanRail.find((i) => {
          return i.siteCode == item.siteCode;
        });
        if (rail) {
          rail.count = item.count;
        }
      }
    });
    renderSitePoints();
    renderSubwayPoints();
  }
};
//初始化地图
const initMap = () => {
  Cesium.Ion.defaultAccessToken = cesiumConfig.ionToken;
  viewer = new Cesium.Viewer("cesium-container", {
    animation: false,
    timeline: false,
    depth: true,
    stencil: false,
    premultipliedAlpha: true,
    preserveDrawingBuffer: false,
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    navigationHelpButton: false,
    shouldAnimate: false, // 动画效果
    sceneMode: Cesium.SceneMode.SCENE2D,
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: "/tiles_ty/{z}/{y}/{x}.png",
      minimumLevel: 3,
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      maximumLevel: 17,
      tileWidth: 256, // 增加瓦片尺寸
      tileHeight: 256,
    }),
    requestRenderMode: true,
    maximumScreenSpaceError: 2, // 降低渲染误差阈值
    contextOptions: {
      webgl: {
        antialias: true, // 开启抗锯齿
      },
    },
  });
  viewer.scene.postProcessStages.fxaa.enabled = false;
  viewer.scene.fxaa = false;
  viewer.scene.msaa = new Cesium.PostProcessStage({
    fragmentShader: `
      uniform sampler2D colorTexture;
      varying vec2 v_textureCoordinates;
      void main() {
        vec4 color = texture2D(colorTexture, v_textureCoordinates);
        gl_FragColor = color;
      }
    `,
    sampleMode: Cesium.PostProcessStageSampleMode.LINEAR,
    uniforms: {},
    forcePowerOfTwo: true,
  });
  viewer.scene.backgroundColor = Cesium.Color.BLACK;
  viewer.scene.globe.maximumScreenSpaceError = 1.5;
  viewer.clock.multiplier = 0.5;
  // 获取当前的图层
  // let layer = viewer.scene.imageryLayers.get(0);

  // // 改变当前地图的组织结构
  // layer.minificationFilter=Cesium.TextyreMinificationFiler.NEAREST;
  // layer.magnificationFilter=Cesium.TextureMagnificationFilter.NEAREST

  // viewer.scene.camera.cancelFlight();
  var imaglyser = new Cesium.ImageryLayer(
    new Cesium.UrlTemplateImageryProvider({
      url: "/tiles_ty/{z}/{y}/{x}.png",
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      minimumLevel: 3,
      maximumLevel: 17,
      tileWidth: 256, // 增加瓦片尺寸
      tileHeight: 256,
      enablePickFeatures: false,
    })
  );
  viewer.imageryLayers.add(imaglyser);
  // 添加暗色滤镜
  viewer.scene.globe.enableLighting = true;
  viewer.scene.globe.dynamicAtmosphereLighting = true;
  viewer.scene.globe.dynamicAtmosphereLightingFromSun = false;

  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1500; // 最小视距(米)
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 45000; // 最大视距

  viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;
  // 应用暗色滤镜
  modifyMap(viewer, {
    invertColor: true,
    filterRGB: [30, 79, 162],
  });
  // 新增默认视角配置
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      112.54, // 中心点经度（太原经度范围中间值）
      37.81, // 中心点纬度（太原纬度范围中间值）
      44000 // 初始高度（单位：米）
    ),
    orientation: {
      heading: Cesium.Math.toRadians(0), // 正北方向
      pitch: Cesium.Math.toRadians(-90), // 垂直向下（2D模式）
      roll: 0,
    },
  });
  addMetroLines();
  // 添加点击事件监听
  addClickEvent();
  // 获取数据、渲染站点marker
  getListStaff()
};
const addMetroLines = () => {
  // 地铁数据可视化逻辑
  let positions = [];
  const lnglatData = taiyuanLine.map((item) => item.split(","));
  lnglatData.forEach((station, index) => {
    if (station.length > 1 && station[0] && station[1]) {
      positions.push(
        Cesium.Cartesian3.fromDegrees(Number(station[0]), Number(station[1], 0))
      );
    }
  });
  viewer.entities.add({
    polyline: {
      positions,
      width: 10, // 加粗线路
      material: new Cesium.PolylineOutlineMaterialProperty({
        color: Cesium.Color.fromCssColorString("#25c2f2"),
      }),
      clampToGround: false,
    },
  });
};
// 地铁站渲染
const renderSubwayPoints = () => {
  siteData.value.forEach((station, index) => {
    const lnglat = station.location.split(",");
    const lon = parseFloat(lnglat[0]);
    const lat = parseFloat(lnglat[1]);
    let siteFlag = false,
      siteName = station.name,
      pixelOffset = 0;
    if (station.siteCount > 0) {
      siteName += `(${station.siteCount})`;
      siteFlag = true;
      pixelOffset = `(${station.siteCount})`.length * 2;
    }
    // 渲染站点marker
    const marker = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(lon, lat),
      point: {
        pixelSize: 10, // 增大标记尺寸
        color: Cesium.Color.fromCssColorString("#FFFFFF"), // 金色标记
        outlineColor: Cesium.Color.fromCssColorString("#e6614c"), // 橙色轮廓
        outlineWidth: 1, // 加粗轮廓
      },
      customData: {
        name: station.siteCode,
        type: "Site",
        flag: siteFlag,
        // 可以添加更多自定义数据
      },
    });
    // label文字
    const label = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(lon, lat),
      label: {
        text: siteName, // 每2个字符插入换行符
        font: "12px sans-serif", // 缩小字体
        fillColor: siteFlag ? Cesium.Color.RED : Cesium.Color.YELLOW,
        outlineColor: siteFlag ? Cesium.Color.RED : Cesium.Color.YELLOW,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 1,
        verticalOrigin: Cesium.VerticalOrigin.CENTER, // 调整垂直对齐
        pixelOffset: new Cesium.Cartesian2(
          (station?.x !== undefined ? station.x : 0) + pixelOffset, // 显式判断
          station?.y !== undefined ? station.y : -20 // 保持原有逻辑
        ),
        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保标签永远可见
      },
      customData: {
        name: station.siteCode,
        flag: siteFlag,
        type: "Site", // 自定义类型，用于标识实体为变电站
        // 可以添加更多自定义数据
      },
    });
    if(station.dutyPoint){
      renderDutyPoints(lnglat,station.dutyPoint)
    }
    mapEntities.value.push(marker); // 将实体添加到数组中
    mapEntities.value.push(label); // 将实体添加到数组中

    //渲染变电所
    if (!station.bdsName) return;
    const image = bdsIcons[station.bdsType - 1];
    let flag = false,
      verticalText = '',
      offsetX = 0;
    if (station.bdsCount > 0) {
      flag = true;
    }
    let labelPixelOffset = new Cesium.Cartesian2(
      station?.bdsX !== undefined ? station.bdsX : 0, // 显式判断
      station?.bdsY !== undefined ? station.bdsY : 20 // 保持原有逻辑
    );
    if (index > 9) {
      verticalText = verticalText.split("").join("\n");
      labelPixelOffset = new Cesium.Cartesian2(
        station?.iconX !== undefined ? station.iconX : 0, // 显式判断
        (station?.iconY !== undefined ? station.iconY : 20) + 10 // 保持原有逻辑
      );
    } 
    if (flag) verticalText += `(${station.bdsCount})`;
    const tagEntities = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(lon, lat),
      billboard: {
        image: image, // 图片路径（需放入public/images目录）
        width: 15, // 图片宽度
        height: 15, // 图片高度
        pixelOffset: new Cesium.Cartesian2(
          (station?.iconX !== undefined ? station.iconX : 0) + offsetX, // 显式判断
          station?.iconY !== undefined ? station.iconY : 20 // 保持原有逻辑
        ),
      },
      label: {
        text: verticalText, // 显示的文字
        font: "12px sans-serif", // 字体大小和样式
        fillColor: flag ? Cesium.Color.RED : Cesium.Color.YELLOW, // 文字填充颜色
        outlineColor: flag ? Cesium.Color.RED : Cesium.Color.YELLOW, // 文字轮廓颜色
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式
        outlineWidth: 1, // 文字轮廓宽度
        verticalOrigin: Cesium.VerticalOrigin.TOP, // 垂直对齐方式
        pixelOffset: labelPixelOffset,
        show:flag,
        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保标签永远可见
      },
      // 添加自定义属性，方便点击时识别
      customData: {
        name: station.bdsName,
        flag,
        type: "Substation",
        // 可以添加更多自定义数据
      },
    });
    mapEntities.value.push(tagEntities); // 将实体添加到数组中
    if (station.id == "900000151670004") {
      renderCenterStreet();
    }
    if(station.id == "900000151670019"){
      renderXiaYuanZbd();
    }
  });
};
// 龙兴街主变电站渲染
const renderCenterStreet = () => {
  const centerBdsPoints = zxjdBdsPoints.lxjd;
  const lnglat = centerBdsPoints.location.split(",");
  const lon = parseFloat(lnglat[0]);
  const lat = parseFloat(lnglat[1]);
  let zxjBdsName = centerBdsPoints.name,
    zxjBdsFlag = false;
  if (centerBdsPoints.bdsCount > 0) {
    zxjBdsName += `(${centerBdsPoints.bdsCount})`;
    zxjBdsFlag = true;
  }
  const centerBds = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(lon, lat),
    billboard: {
      image: new URL("@/assets/icon/zbds.png", import.meta.url).href,
      width: 15, // 图片宽度
      height: 15, // 图片高度
      pixelOffset: new Cesium.Cartesian2(60, 10),
    },
    label: {
      text: zxjBdsName, // 显示的文字
      font: "12px sans-serif", // 字体大小和样式
      fillColor: zxjBdsFlag ? Cesium.Color.RED : Cesium.Color.YELLOW, // 文字填充颜色
      outlineColor: zxjBdsFlag ? Cesium.Color.RED : Cesium.Color.YELLOW, // 文字轮廓颜色
      style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式
      outlineWidth: 1, // 文字轮廓宽度
      verticalOrigin: Cesium.VerticalOrigin.TOP, // 垂直对齐方式
      pixelOffset: new Cesium.Cartesian2(
        centerBdsPoints.x,
        centerBdsPoints.y
      ),
      disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保标签永远可见
    },
    // 添加自定义属性，方便点击时识别
    customData: {
      name: centerBdsPoints.bdsName,
      flag: zxjBdsFlag,
      type: "Substation",
      // 可以添加更多自定义数据
    },
  });
  if(centerBdsPoints.dutyPoint){
      renderDutyPoints(lnglat,centerBdsPoints.dutyPoint)
  }
  mapEntities.value.push(centerBds); // 将实体添加到数组中
};
// 下元主变电站渲染
const renderXiaYuanZbd = () => {
  const xiaYuanBdsPoints = zxjdBdsPoints.xiayuan;
  const lnglat = xiaYuanBdsPoints.location.split(",");
  const lon = parseFloat(lnglat[0]);
  const lat = parseFloat(lnglat[1]);
  let zxjBdsName = xiaYuanBdsPoints.name,
    zxjBdsFlag = false;
  if (xiaYuanBdsPoints.bdsCount > 0) {
    zxjBdsName += `(${xiaYuanBdsPoints.bdsCount})`;
    zxjBdsFlag = true;
  }
  const centerBds = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(lon, lat),
    billboard: {
      image: new URL("@/assets/icon/zbds.png", import.meta.url).href,
      width: 15, // 图片宽度
      height: 15, // 图片高度
      pixelOffset: new Cesium.Cartesian2(0, -40),
    },
    label: {
      text: zxjBdsName, // 显示的文字
      font: "12px sans-serif", // 字体大小和样式
      fillColor: zxjBdsFlag ? Cesium.Color.RED : Cesium.Color.YELLOW, // 文字填充颜色
      outlineColor: zxjBdsFlag ? Cesium.Color.RED : Cesium.Color.YELLOW, // 文字轮廓颜色
      style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式
      outlineWidth: 1, // 文字轮廓宽度
      verticalOrigin: Cesium.VerticalOrigin.TOP, // 垂直对齐方式
      pixelOffset: new Cesium.Cartesian2(
        xiaYuanBdsPoints.x,
        xiaYuanBdsPoints.y
      ),
      disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保标签永远可见
    },
    // 添加自定义属性，方便点击时识别
    customData: {
      name: xiaYuanBdsPoints.bdsName,
      flag: zxjBdsFlag,
      type: "Substation",
      // 可以添加更多自定义数据
    },
  });
  if(xiaYuanBdsPoints.dutyPoint){
      renderDutyPoints(lnglat,xiaYuanBdsPoints.dutyPoint)
  }
  mapEntities.value.push(centerBds); // 将实体添加到数组中
};
// 站点间点渲染
const renderSitePoints = () => {
  taiyuanRail.forEach((station) => {
    const lnglat = station.lnglat.split(",");
    if (station.count <= 0) {
      return; // 跳过无效的坐标
    }
    const lon = parseFloat(lnglat[0]);
    const lat = parseFloat(lnglat[1]);
    const entities = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(lon, lat),
      point: {
        pixelSize: 10, // 增大标记尺寸
        color: Cesium.Color.fromCssColorString("red"), // 金色标记
        outlineColor: Cesium.Color.fromCssColorString("#e6614c"), // 橙色轮廓
        outlineWidth: 1, // 加粗轮廓
      },
      label: {
        text: `${station.count}`, // 显示的文字
        font: "12px sans-serif", // 字体大小和样式
        fillColor: Cesium.Color.RED, // 文字填充颜色
        outlineColor: Cesium.Color.RED, // 文字轮廓颜色
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文字样式
        outlineWidth: 1, // 文字轮廓宽度
        verticalOrigin: Cesium.VerticalOrigin.TOP, // 垂直对齐方式
        pixelOffset: new Cesium.Cartesian2(0, -20),
        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保标签永远可见
      },
      customData: {
        name: station.siteCode,
        flag: true,
        type: "Site", // 自定义类型，用于标识实体为变电站
        // 可以添加更多自定义数据
      },
    });
    mapEntities.value.push(entities);
  });
};
// 值守点渲染
const renderDutyPoints = (lnglat,data) => {
    for (const element of dutyPoints.value) {
        if(element.name == data.name){
          return
        }
    }
    let dutyName = '无'
    for (const element of listStaff.value) {
      if(data.name == '西山停车场' || data.name =='马练营车辆段'){
        if(element.position == data.name){
          data.data = element
          continue
        }
        if(element.position == data.name2){
          data.data2 = element
          continue
        }
        if(data.data2.dutyName){
          dutyName = data.data.dutyName + '、' + data.data2.dutyName
        }else{
          dutyName = data.data.dutyName
        }
      }
      if(element.position == data.name){
        data.data = element
        dutyName = element.dutyName
      }
    }
    const lon = parseFloat(lnglat[0]);
    const lat = parseFloat(lnglat[1]);
    const dutyPoint = viewer.entities.add({
      name:data.name,
      position: Cesium.Cartesian3.fromDegrees(lon, lat),
      billboard: {
        image: new URL("@/assets/icon/zsd.png", import.meta.url).href,
        width: 18, // 图片宽度
        height: 18, // 图片高度
        pixelOffset: new Cesium.Cartesian2(
          data.x,
          data.y
        ),
      },
      // 添加自定义属性，方便点击时识别
      customData: {
        name: `值班人：${dutyName}`,
        flag: data.data.dutyName!='无',
        type: "Duty",
        datas:data,
      },
    });
    dutyPoints.value.push(dutyPoint)
};

// 添加事件监听
const addClickEvent = () => {
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  // 新增提示框元素
  const tooltip = document.createElement("div");
  tooltip.style.cssText = `
        position: absolute;
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        pointer-events: none;
        display: none;
        z-index: 1;
      `;
  document.body.appendChild(tooltip);
  // 监听鼠标移动事件
  handler.setInputAction((e) => {
    const currentMoveObj = viewer.scene.pick(e.endPosition);
    if (currentMoveObj) {
      // 鼠标滑过模型
      if (currentMoveObj.id?.customData) {
        const { name, datas, type } = currentMoveObj.id.customData;
        if (type == "Duty") {
          tooltip.style.display = "block";
          tooltip.textContent = name;
          requestAnimationFrame(() => {
            const rect = tooltip.getBoundingClientRect();
            const left = e.endPosition.x - rect.width / 2;
            tooltip.style.left = `${left}px`;
            tooltip.style.top = `${e.endPosition.y - 45}px`;
          });
        }
      }
      viewer.enableCursorStyle = false;
      viewer._element.style.cursor = "";
      document.documentElement.style.cursor = "pointer";
      // document.body.classList.add('draw-cursor') // 设置为自定义的图标
    } else {
      tooltip.style.display = "none";
      // 鼠标滑过场景
      viewer.enableCursorStyle = true;
      document.documentElement.style.cursor = "";
      // document.body.classList.remove('draw-cursor')
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  // 监听鼠标点击事件
  handler.setInputAction((movement) => {
    const pickedObject = viewer.scene.pick(movement.position);
    if (Cesium.defined(pickedObject) && pickedObject.id) {
      const entity = pickedObject.id;
      if (entity.customData) {
        const { name, flag, type } = entity.customData;
        if (name && flag) {
          modelData.modelType = type;
          modelData.value = name;
          if(type && type == 'Duty'){
            openDetailModal(entity.customData.datas)
            return
          }
          openTableModal();
        }
      }
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};
</script>

<style scoped>
.cesium-container {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: url("/resource/leaflet/images/tiles/15/26629/12663.png");
}

:deep(.cesium-credit-wrapper) {
  display: none !important;
}

/* 新增悬浮提示样式 */
.map-tip {
  position: fixed;
  left: 25%;
  bottom: 110px;
  background: rgba(19, 49, 103, 0.8);
  padding: 10px;
  border-radius: 4px;
  z-index: 999;
}

.tip-item {
  display: flex;
  align-items: center;
  margin: 5px 0;
  color: #ffd700;
}

.tip-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

:deep(.ant-table-container.ant-table-body) {
  &::-webkit-scrollbar {
    width: 8px;
    background-color: rgba(15, 48, 87, 0.8);
  }

  &::-webkit-scrollbar-thumb {
    background-color: #28b1ff;
    border-radius: 4px;

    &:hover {
      background-color: #36c6ff;
    }
  }

  &::-webkit-scrollbar-track {
    background-color: rgba(40, 177, 255, 0.1);
  }
}
:deep(.cesium-viewer-fullscreenContainer) {
  top: 5px;
  right: 5px;
  bottom: unset;
  z-index: 99999;
}
</style>
